<!DOCTYPE html>
<html>
<head>
    <title>Static Force Analysis Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="450" height="550"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 3;
        ctx.font = 'italic 24px serif';

        // Parameters
        const cx = 220;
        const o_y = 100;
        const O = { x: cx, y: o_y };
        
        const b = 130; // length OM
        const a = 100; // radius of the sphere
        const phi = 30 * Math.PI / 180; // angle phi in radians

        // Calculate position of M (center of the sphere)
        const M = {
            x: O.x + b * Math.sin(phi),
            y: O.y + b * Math.cos(phi)
        };

        // Calculate position of T (attachment point on the sphere)
        // This angle is chosen to match the visual representation in the diagram.
        const theta_MT_vertical = 65 * Math.PI / 180; 
        const T = {
            x: M.x + a * Math.sin(theta_MT_vertical),
            y: M.y + a * Math.cos(theta_MT_vertical)
        };
        
        // --- Start Drawing ---

        // 1. Draw the sphere
        ctx.beginPath();
        ctx.arc(M.x, M.y, a, 0, 2 * Math.PI);
        ctx.stroke();

        // 2. Draw the fixed support at O
        // T-bar
        ctx.beginPath();
        ctx.moveTo(O.x - 50, O.y - 20);
        ctx.lineTo(O.x + 50, O.y - 20);
        ctx.moveTo(O.x, O.y - 20);
        ctx.lineTo(O.x, O.y);
        ctx.stroke();
        // Hatching
        ctx.save();
        ctx.lineWidth = 1.5;
        for (let i = -50; i < 50; i += 8) {
            ctx.beginPath();
            ctx.moveTo(O.x + i, O.y - 20);
            ctx.lineTo(O.x + i - 10, O.y - 30);
            ctx.stroke();
        }
        ctx.restore();

        // 3. Draw the ropes
        // Rope O-T
        ctx.beginPath();
        ctx.moveTo(O.x, O.y);
        ctx.lineTo(T.x, T.y);
        ctx.stroke();

        // Rope T-P
        const p_size = 40;
        const rope_TP_length = 150;
        const P_pos = { x: T.x, y: T.y + rope_TP_length };
        ctx.beginPath();
        ctx.moveTo(T.x, T.y);
        ctx.lineTo(P_pos.x, P_pos.y);
        ctx.stroke();

        // 4. Draw the weight P
        ctx.strokeRect(P_pos.x - p_size / 2, P_pos.y, p_size, p_size);
        ctx.fillText('P', P_pos.x + p_size, P_pos.y + p_size/1.5);
        
        // 5. Draw dashed lines
        ctx.save();
        ctx.setLineDash([5, 5]);
        ctx.lineWidth = 2;
        // Line OM
        ctx.beginPath();
        ctx.moveTo(O.x, O.y);
        ctx.lineTo(M.x, M.y);
        ctx.stroke();
        // Line MT
        ctx.beginPath();
        ctx.moveTo(M.x, M.y);
        ctx.lineTo(T.x, T.y);
        ctx.stroke();
        // Vertical line from O
        ctx.beginPath();
        ctx.moveTo(O.x, O.y);
        ctx.lineTo(O.x, M.y + 20);
        ctx.stroke();
        ctx.restore();

        // 6. Draw labels and angles
        // Label M
        ctx.fillText('M', M.x - 10, M.y + 30);
        
        // Label O
        ctx.fillText('O', O.x - 5, O.y - 35);

        // Angle phi
        ctx.beginPath();
        const arc_radius_phi = 40;
        ctx.arc(O.x, O.y, arc_radius_phi, Math.PI / 2, Math.PI / 2 + phi);
        ctx.stroke();
        ctx.fillText('φ', O.x + arc_radius_phi * Math.sin(phi/2) + 5, O.y + arc_radius_phi * Math.cos(phi/2) + 5);

        // Radius a
        ctx.save();
        ctx.lineWidth = 2.5;
        ctx.beginPath();
        ctx.moveTo(M.x, M.y);
        ctx.lineTo(M.x - a, M.y);
        ctx.stroke();
        // little right angle symbol for radius
        ctx.beginPath();
        ctx.moveTo(M.x - 8, M.y);
        ctx.lineTo(M.x - 8, M.y - 8);
        ctx.lineTo(M.x, M.y - 8);
        ctx.stroke();
        ctx.restore();
        ctx.fillText('a', M.x - a/2 - 10, M.y - 10);

    </script>
</body>
</html>